<template>
  <div class="p16">
    <div class="person">
      <div class="person-head flex flex-align-items-center">
        <h3 class="font-20">你好，{{ userInfo.name }}</h3>
        <img :src="memberImgs[userInfo.member]">
        <p v-if="userInfo.member !== '企业版'" class="flex flex-align-items-center pointer" @click="toPath('/kocVip')">
          <i class="iconfont icon-rocket-o"></i>
          <span class="font-12">升级会员</span>
        </p>
      </div>
      <div class="person-tip flex flex-align-items-center">
        <i class="iconfont icon-gonggaox"></i>
        <span class="font-12">距离会员到期还有 {{ dateDiff(userInfo.memberExpiration) }} 天</span>
      </div>
      <div class="quota flex flex-align-items-center">
        <h3 class="font-14">本月额度使用情况</h3>
        <el-tooltip content="当前账号消耗数量/所有账号消耗数量/每月额度" placement="top" effect="light">
          <i class="iconfont icon-icon_jubao-mian pointer"></i>
        </el-tooltip>
        <el-tooltip :content="`剩余数量：${memberInfo.channelTotal - memberInfo.channel}`" placement="top" effect="light">
          <p class="flex flex-align-items-center font-14 pointer">
            解锁频道：<span class="font-14">{{ memberInfo.channel }}</span>{{ userInfo.member !== '普通会员' ? ' / ' : '' }}<span
              class="font-14" v-if="userInfo.member !== '普通会员'">{{ memberInfo.channel }}</span>/ {{
                memberInfo.channelTotal }}
          </p>
        </el-tooltip>
        <el-tooltip :content="`剩余数量：${memberInfo.emailTotal - memberInfo.email}`" placement="top" effect="light">
          <p class="flex flex-align-items-center font-14 pointer">
            邮件发送：<span class="font-14">{{ memberInfo.email }}</span>{{ userInfo.member !== '普通会员' ? ' / ' : '' }}<span
              class="font-14" v-if="userInfo.member !== '普通会员'">{{ memberInfo.email }}</span> / {{ memberInfo.emailTotal
              }}
          </p>
        </el-tooltip>
        <el-tooltip :content="`剩余数量：${memberInfo.taskTotal - memberInfo.task}`" placement="top" effect="light">
          <p class="flex flex-align-items-center font-14 pointer">
            红人任务发布：<span class="font-14">{{ memberInfo.task }}</span> / {{ memberInfo.taskTotal }}
          </p>
        </el-tooltip>
      </div>
      <div class="data flex flex-align-items-center">
        <div v-for="(item, index) in dataList" :key="index" class="data-item flex-center flex-align-items-center"
          :class="{ pointer: index > 0 }"
          @click="item.path && userInfo.member === '普通会员' ? upgradeBenefitsShowChange : toPath(item.path)">
          <img :src="item.icon">
          <div class="data-info flex flex-column">
            <p class="font-14">{{ item.name }}</p>
            <h3 class="font-24-B">{{ item.value }}</h3>
          </div>
        </div>
      </div>
    </div>

    <div class="func flex-between">
      <div class="action">
        <h3 class="font-22">快捷操作</h3>
        <div class="action-main flex-between flex-align-items-center">
          <template v-for="(item, index) in operateList">
            <div class="action-item flex flex-align-items-center pointer"
              @click="userInfo.member === '普通会员' ? upgradeBenefitsShowChange : toPath(item.path)">
              <img :src="item.icon">
              <div class="flex-between flex-column">
                <h3 class="font-14">{{ item.name }}</h3>
                <div class="flex-between flex-align-items-center">
                  <p class="font-12">{{ item.desc }}</p>
                  <i class="iconfont icon-a-jiantou-you"></i>
                </div>
              </div>
              <h6 class="font-32">0{{ index + 1 }}</h6>
            </div>
            <img v-if="index < 2" src="@/assets/arrow-right.png">
          </template>
        </div>
      </div>
      <div class="banner">
        <el-carousel height="130px" arrow="never">
          <el-carousel-item v-for="item in banner" :key="item.id">
            <img :src="item.img" class="pointer">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="echart flex-between">
      <div class="echart-reach flex-center flex-align-items-center">
        <p class="echart-legend font-12">触达红人数</p>
        <div v-show="sensationEchartsData.length > 0" id="touchdown-trend-chart"></div>
        <no-echart v-if="sensationEchartsData.length === 0"></no-echart>
      </div>
      <div class="echart-country flex-center flex-align-items-center">
        <no-echart></no-echart>
      </div>
    </div>
  </div>

  <upgrade-benefits v-if="upgradeBenefitsShow" @close="upgradeBenefitsShowChange"></upgrade-benefits>
</template>

<script setup>
import NoEchart from '../components/noEchart.vue';
import UpgradeBenefits from '@/components/upgradeBenefits.vue';
import { ref, onMounted } from 'vue';
import * as echarts from "echarts";
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

const router = useRouter();
const store = useStore();

const operateList = [
  {
    name: '推广计划',
    desc: '满意红人即刻呈现',
    path: '',
    icon: require('../../../assets/icon-8.png')
  },
  {
    name: '邮件中心',
    desc: '一键批量触达',
    path: '',
    icon: require('../../../assets/icon-9.png')
  },
  {
    name: '我的产品',
    desc: '发送产品和数据监控',
    path: '',
    icon: require('../../../assets/icon-10.png')
  }
];
const memberImgs = {
  '普通会员': require('../../../assets/member.jpg'),
  '专业版': require('../../../assets/img-vip-2.jpg'),
  '高级专业版': require('../../../assets/img-vip-2.jpg'),
  '企业版': require('../../../assets/img-vip-2.jpg'),
}

const userInfo = ref(store.state.userInfo);
const memberInfo = ref({
  channel: 1,
  channelTotal: 2,
  email: 0,
  emailTotal: 1,
  task: 0,
  taskTotal: 1,
  touchNum: 0,
  repliesNum: 0,
  cooperateNum: 0,
  product: 0
});
const dataList = ref([
  {
    name: '总触达数',
    value: 0,
    icon: require('../../../assets/icon-4.jpg')
  },
  {
    name: '总回复数',
    value: 0,
    path: '',
    icon: require('../../../assets/icon-5.jpg')
  },
  {
    name: '已合作数',
    value: 0,
    path: '',
    icon: require('../../../assets/icon-6.jpg')
  },
  {
    name: '产品监控',
    value: 0,
    path: '',
    icon: require('../../../assets/icon-7.jpg')
  }
]);
const banner = ref([
  {
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc',
    id: 1
  },
  {
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc',
    id: 2
  }
]);
const upgradeBenefitsShow = ref(false);
const sensationEchartsData = ref([
  {
    time: '2023-12-10',
    count: 3
  },
  {
    time: '2023-12-11',
    count: 3
  },
  {
    time: '2023-12-12',
    count: 6
  }
]);

// 计算时间差
const dateDiff = time => {
  if (userInfo.value.member === '普通会员') {
    return '-';
  } else {
    let now = new Date().getTime();
    time = new Date(time).getTime();
    return Math.floor((time - now) / (24 * 60 * 60 * 1000));
  }
}
// 跳转登录页
const toPath = path => {
  if (path) {
    router.push(path);
  }
}
// 显示或隐藏升级权益弹窗
const upgradeBenefitsShowChange = () => {
  upgradeBenefitsShow.value = !upgradeBenefitsShow.value;
}
// 内容趋势echart
const touchdownTrendEchart = () => {
  const myEChart = echarts.init(document.getElementById("touchdown-trend-chart"));
  let xAxisData = [], seriesData = [];
  sensationEchartsData.value.forEach(item => {
    xAxisData.push(item.time);
    seriesData.push(item.count);
  });
  const option = {
    title: {
      text: '触达走势图'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} <br/>{a} : {c}'
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true
      }
    },
    series: [
      {
        name: '触达量',
        data: seriesData,
        type: 'line',
        smooth: true
      }
    ]
  };
  myEChart.setOption(option);
}

onMounted(() => {
  touchdownTrendEchart();
});
</script>

<style lang="less" scoped>
.person {
  height: 204px;
  padding-top: 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background-color: #fff;
  background-image: url(@/assets/bg-homepage.jpg);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: cover;

  .person-head {
    height: 24px;
    padding: 0 24px;
    margin-bottom: 8px;

    h3 {
      color: #333;
      line-height: 24px;
      margin-right: 24px;
    }

    img {
      height: 24px;
      margin-right: 16px;
    }

    p {
      i {
        color: @main-color;
        margin-right: 2px;
      }

      span {
        color: @main-color;
      }
    }
  }

  .person-tip {
    margin-bottom: 8px;
    padding: 0 24px;

    i {
      color: #999;
      margin-right: 4px;
    }

    span {
      color: #999;
    }
  }

  .quota {
    margin-bottom: 16px;
    padding: 0 24px;

    h3 {
      margin-right: 4px;
      color: #333;
      line-height: 20px;
    }

    i {
      color: #9e9ea7;
      margin-right: 24px;
    }

    p {
      height: 20px;
      margin-right: 48px;
      color: #a8a8b1;
      line-height: 20px;
      margin-right: 48px;

      span {
        &:first-child {
          color: @main-color;
        }

        &:last-child {
          color: #4172fe;
        }
      }
    }
  }

  .data {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    .data-item {
      height: 96px;
      position: relative;

      &:not(:last-child)::after {
        content: "";
        width: 2px;
        height: 40px;
        background: #f2f3f5;
        position: absolute;
        top: 28px;
        right: 0;
      }

      img {
        width: 40px;
        height: 40px;
        margin-right: 12px;
        border-radius: 50%;
      }

      .data-info {
        p {
          color: #9e9ea7;
          line-height: 16px;
          margin-bottom: 8px;
        }

        h3 {
          color: #333;
          line-height: 24px;
        }
      }
    }
  }
}

.func {
  margin-bottom: 16px;
  flex-shrink: 0;

  .action {
    flex: 1;
    padding: 16px 24px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(232, 226, 228, .3);
    margin-right: 16px;

    &>h3 {
      height: 22px;
      color: #333;
      line-height: 22px;
      margin-bottom: 20px;
    }

    .action-main {
      .action-item {
        width: 183px;
        height: 56px;
        padding: 8px;
        background: #f3f3f4;
        border-radius: 4px;
        position: relative;

        &:nth-child(1) {
          i {
            background: #fddce4;
            color: @main-color;
          }

          h6 {
            color: @main-color;
          }
        }

        &:nth-child(3) {
          i {
            background: #D9E3FF;
            color: #3F71FE;
          }

          h6 {
            color: #3F71FE;
          }
        }

        &:nth-child(5) {
          i {
            background: #D9F9FE;
            color: #43E3F8;
          }

          h6 {
            color: #43E3F8;
          }
        }

        img {
          width: 32px;
          height: 32px;
          margin-right: 8px;
        }

        &>div {
          width: 127px;
        }

        h3 {
          color: #333;
          line-height: 18px;
        }

        p {
          color: #9e9ea7;
          line-height: 18px;
        }

        i {
          width: 14px;
          height: 14px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 10px;
        }

        h6 {
          height: 32px;
          opacity: .2;
          line-height: 35px;
          position: absolute;
          top: -20px;
          right: 8px;
        }
      }

      &>img {
        width: 25px;
        height: 22px;
      }
    }
  }

  .banner {
    width: 400px;
    border-radius: 4px;
    overflow: hidden;

    img {
      width: 400px;
      height: 130px;
    }
  }
}

.echart {
  flex: 1;

  .echart-reach {
    flex: 1;
    min-height: 475px;
    padding: 16px 24px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(232, 226, 228, .3);
    position: relative;
    margin-right: 16px;

    .echart-legend {
      height: 17px;
      color: #9e9ea7;
      line-height: 17px;
      position: absolute;
      top: 19px;
      right: 26px;

      &::before {
        content: "";
        width: 10px;
        height: 10px;
        background: #f85277;
        border-radius: 50%;
        position: absolute;
        top: 4px;
        left: -18px;
      }
    }

    #touchdown-trend-chart {
      width: 100%;
      height: 443px;
    }
  }

  .echart-country {
    width: 400px;
    min-height: 475px;
    padding: 16px 24px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(232, 226, 228, .3);
    position: relative;
  }
}
</style>
